{include file="public/header" /}
<style>
    html {
        background-color: #F5F7F9 !important;
    }

    .layui-tab-title .layui-this {
        color: #1E9FFF !important;
        font-size: 15px !important;
        font-weight: bold;
    }
</style>
<body>
<div class="layui-fluid layui-anim layui-anim-downbit">
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form" id="form" action="{:url('save')}" lay-filter='form'>
                <input type="hidden" name="id" id="id" value="{$info?$info.id:''}"/>
                <div class="layui-tab">
                    <ul class="layui-tab-title">
                        <li class="layui-this">商品信息</li>
<!--                        <li>商品规格</li>-->
                        <li>商品图片</li>
                        <li>商品详情</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="layui-form-item">
                                <label class="layui-form-label">商品名称</label>
                                <div class="layui-input-block">
                                    <input type="text" name="title" lay-verify="required" lay-reqtext="请填写商品名称"
                                           placeholder="请填写商品名称" class="layui-input"
                                           value="{$info?$info.title:''}"/>
                                </div>
                            </div>
                            <div class="layui-form-item" data-url="{:url('ProductCate/getCate')}">
                                <label class="layui-form-label">所属分类</label>
                                <div class="layui-input-inline">
                                    <select name="cate_1" id="cate_1" lay-filter="cate_1" lay-verify="required" lay-reqtext="请选择一级分类">
                                        <option value="">请选择</option>
                                        {foreach name="cate" item="vo"}
                                        <option value="{$vo.id}" {if isset($info) && $info.cate_1== $vo.id}selected{/if}>{$vo.title}</option>
                                        {/foreach}
                                    </select>
                                </div>
                                <div class="layui-input-inline">
                                    <select data-id="{$info?$info.cate_2:''}" id="cate_2" name="cate_2" lay-filter="cate_2"
                                            lay-verify="required" lay-reqtext="请选择二级分类"></select>
                                </div>

                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">排序</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="sort" autocomplete="off"
                                           placeholder="请输入排序，越小越靠前"
                                           class="layui-input"
                                           value="{$info?$info.sort:''}">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">原价</label>
                                    <div class="layui-input-inline" style="width: 100px;">
                                        <input type="text" name="price" value="{$info?$info.price:''}"
                                               placeholder="￥" autocomplete="off" class="layui-input" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')">
                                    </div>

                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">会员价</label>
                                    <div class="layui-input-inline" style="width: 100px;">
                                        <input type="text" name="vip_price" value="{$info?$info.vip_price:''}"
                                               placeholder="￥" autocomplete="off" class="layui-input" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')">
                                    </div>

                                </div>
                            </div>
<!--                            <div class="layui-form-item">-->
<!--                                <div class="layui-inline">-->
<!--                                    <label class="layui-form-label">运费</label>-->
<!--                                    <div class="layui-input-inline" style="width: 100px;">-->
<!--                                        <input type="text" name="freight" value="{$info?$info.freight:''}"-->
<!--                                               placeholder="￥" autocomplete="off" class="layui-input" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')">-->
<!--                                    </div>-->

<!--                                </div>-->
<!--                            </div>-->
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">库存</label>
                                    <div class="layui-input-inline" style="width: 100px;">
                                        <input type="text" name="stock" value="{$info?$info.stock:''}"
                                               placeholder="件" autocomplete="off" class="layui-input" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')">
                                    </div>
<!--                                    <div class="layui-form-mid layui-word-aux">如启用规格，库存将读取所有规格库存总和</div>-->
                                </div>
                            </div>
                        </div>

<!--                        <div class="layui-tab-item">-->

<!--                            <div class="layui-form-item">-->
<!--                                <label class="layui-form-label">启用规格：</label>-->
<!--                                <div class="layui-input-block">-->
<!--                                    <input type="checkbox" name="spec_open" lay-skin="switch" lay-filter="spec_open" value="1" {if isset($info) && $info.spec_open == 1}checked{/if}>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            <div class="spec-elem" style="display: none">-->
<!--                                &lt;!&ndash; sku参数表 &ndash;&gt;-->
<!--                                <div class="layui-form-item">-->
<!--                                    <label class="layui-form-label">规格：</label>-->
<!--                                    <div class="layui-input-block">-->
<!--                                        <div class="fairy-spec-table">请先选择所属分区</div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                &lt;!&ndash; 动态sku表 &ndash;&gt;-->
<!--                                <div class="layui-form-item">-->
<!--                                    <label class="layui-form-label">sku表：</label>-->
<!--                                    <div class="layui-input-block">-->
<!--                                        <div class="fairy-sku-table">请先选择所属分区</div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->


<!--                        </div>-->
                        <div class="layui-tab-item">
                            <label class="layui-form-label">商品图片</label>
                            <?php $data = isset($info)?$info:[];?>
                            {table:alone view='items/img' info='$data' form='["field" => "images", "value" => 10]'/}
                        </div>
                        <div class="layui-tab-item">
                            <label class="layui-form-label">详情</label>
                            <div class="layui-input-block">
                                {table:alone view='items/editor' info='$data' form='["field" => "content"]'/}
                            </div>
                        </div>
                    </div>
                </div>
                <input type="hidden" id="uid" name="uid" value="">
            </form>
        </div>

    </div>
</div>
<div class="layui-form-item layui-layout-admin">
    <div class="layui-input-block">
        <div class="layui-footer" style="left: 0;">
            <div class="layui-footer" style="left: 0;">
                <a class="layui-btn" data-back-url="{$backUrl}" lay-filter="saveProduct" lay-submit>保存</a>
            </div>
        </div>
    </div>
</div>
</body>
{include file="public/footer" /}
<!--<script type="text/javascript" src="/static/admin/addons/blue/js/skuTable.js"></script>-->
<script>
    layui.use(['form'], function () {
        var form = layui.form,
            skuTable = layui.skuTable,
            obj,
            pid = $('#id').val();

        form.on('switch(spec_open)', function(data){
            if(data.elem.checked == true){
                $(".spec-elem").show();
            }else{
                $(".spec-elem").hide();
            }
        });

        //初始化规格
        if (pid) {
            createSelect($("#cate_2"), '{$info?$info.cate_2:""}');
            // createSkuTable('{$info?$info.cate_2:""}', pid);
            // if("{$info?$info.spec_open:''}" == '1'){
            //     $(".spec-elem").show();
            // }
        }
        var cate_1 = $("#cate_1").val();
        if (cate_1) {
            createSelect($("#cate_2"), cate_1)
        }
        form.on('select(cate_1)', function (data) {
            if (data.value) {
                createSelect($("#cate_2"), data.value);
            }
            $("#cate_2").html('<option value="">请选择</option>');
            form.render();
        });

        // form.on('select(cate_1)', function (data) {
        //     if (data.value) {
        //         createSkuTable(data.value)
        //     } else {
        //         skuTableRender();
        //     }
        // })

        function createSkuTable(id, pid = '') {
            layer.load(2);
            $.ajax({
                type: 'GET',
                url: '{:url("spec/getSpec")}',
                data: {id: id, pid: pid},
                dataType: "json",
                success: function (data) {
                    skuTableRender(data.result.specData, data.result.skuData);
                }
            });
        }

        function skuTableRender(data = '', value = '') {
            obj = skuTable.render({
                rowspan: true,
                //上传占位图
                skuIcon: '/static/admin/images/sku-add.png',
                //上传地址
                uploadUrl: "{:url('uploads/uploadImage')}",
                specValueCreateUrl: "{:url('uploads/uploadImage')}",
                //sku表格配置
                skuTableConfig: {
                    thead: [
                        {title: '图片', icon: ''},
                        {title: '原价', icon: 'layui-icon-cols'},
                        {title: 'VIP价格', icon: 'layui-icon-cols'},
                        {title: '库存', icon: 'layui-icon-cols'}
                    ],
                    tbody: [
                        {type: 'image', field: 'icon', value: '', verify: '', reqtext: ''},
                        {type: 'input', field: 'price', value: '0', verify: 'number'},
                        {type: 'input', field: 'vip_price', value: '0', verify: 'number'},
                        {type: 'input', field: 'stock', value: '0', verify: 'number'}
                    ]
                },
                specData: data,
                skuData: value
            });
            layer.closeAll();
        }

        function createSelect(obj, id) {
            $.get('{:url("productCate/getCate")}', {id: id},
                function (data) {
                    var options = '<option value="">请选择</option>';
                    $.each(data, function (i) {
                        var selected = obj.attr('data-id') == data[i]['id'] ? 'selected' : '';
                        options += '<option value="' + data[i]['id'] + '" ' + selected + '>' + data[i]['title'] + '</option>';
                    })
                    obj.html(options);
                    form.render();
                }, 'json'
            )
        }

        form.verify();
        form.on('submit(saveProduct)', function (res) {
            // //获取规格数据
            // console.log(obj.getSpecData());
            // //获取表单数据
            // console.log(data.field);
            layerLoad();
            var btn = $(this),data = form.val('form');
            btn.attr('disabled', true);
            // data.specData = obj.getSpecData();
            // var state = Object.keys(data.field).some(function (item, index, array) {
            //     return item.startsWith('skus');
            // });
            // console.log(form.val('form'))
            // if (!state) {
            //     layer.msg('sku表数据不能为空', {icon: 5, anim: 6});
            //     return false;
            // }

            var back_url = btn.attr('data-back-url');
            $.ajax({
                type: 'POST',
                url: $("#form").attr('action'),
                data: data,
                dataType: "json",
                success: function (data) {
                    layer.closeAll();
                    if (data.code == 1) {
                        notify.success(data.msg, 1500, function () {
                            if (back_url) {
                                parent.layui.index.refreshAndCloseTabs(back_url, true);
                            } else {
                                if (window.name != '') {
                                    var index = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(index);
                                    parent.layui.table.reload('form_table');
                                } else {
                                    window.location.reload();
                                }
                            }
                        });
                    } else {
                        notify.error(data.msg);
                        btn.removeAttr('disabled');
                    }

                }
            });

        });
    });
</script>
</html>